<template>
  <div class="container-image">
    <el-card>
      <div slot='header'>
        <my-bread>素材管理</my-bread>
      </div>
      <!-- 操作栏 -->
      <div class="btn-nav">
        <el-radio-group @change="changeCollect" v-model="reqParams.collect" size='small'>
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button @click="openDialog()" style="float:right" type="success" size='small'>添加素材</el-button>
      </div>
      <!-- 图片列表 -->
      <div class="img-list">
        <div class="img-item" v-for='item in images' :key='item.id'>
          <img :src="item.url" alt="">
          <div class="img-option">
            <span @click="toggleStatus(item)" class="el-icon-star-off" :class="{red:item.is_collected}"></span>
            <span @click="delImage(item.id)" class="el-icon-delete"></span>

          </div>
        </div>
      </div>
      <!-- 分页 -->
      <el-pagination 
      background 
      hide-on-single-page
      layout="prev, pager, next" 
      @current-change = "changePager"
      :page-siize="reqParams.per_page"
      :current-page="reqParams.page"
       :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 对话框 -->
    <el-dialog title='添加素材' :visible.sync="dialogVisible" width='300px'>
     <!-- 上传组件 -->
     <el-upload
      class="avatar-uploader"
      action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
      name="image"
      :headers='headers'
      :show-file-list="false"
      :on-success="unloadImageSuccess"
      >
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
    </el-dialog>
  </div> 
</template>

<script>
  import auth from '@/utils/auth'
  export default {
    name: 'image-page',
    // collect ： true 查询收藏的图片  false
    data() {
      return {
        reqParams: {
          // 默认查询全部图片
          collect: false,
          //  当前页码
          page: 1,
          // 每页条数
          per_page: 10
        },
        // 图片列表
        images:[],
        // 分页
        total:0,
        // 控制打开关闭对话框(data中数据)
        dialogVisible:false,
        // 上传成功图片地址
        imageUrl:null,
        // 上传图片请求头(data中的数据)
        headers:{
          Authorization:`Bearer ${auth.getUser().token}`
        }
      }
    },
    created() {
        this.getImages()
    },
    methods: {
      // 上传成功的函数
       unloadImageSuccess(res){
        //  console.log(res)  响应主题  后台给的数据
        this.$message.success('上传成功')
        this.imageUrl = res.data.url
        // 3s后：关闭对话框+更新当前列表
        window.setTimeout(()=>{
          this.dialogVisible = false
          this.getImages()
        },3000)
       },
      // 打开对话框
      openDialog(){
       this.dialogVisible = true
      },
        // 删除图片
        delImage(id){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(async ()=>{
            // 点击确定
            try{ 
                await this.$http.delete(`/user/images/${id}`)
                // 成功
                this.$message.success('删除成功')
                // 更新当前列表
                this.getImages()
            }catch(e){
             this.$message.error('删除失败')
            }
          }).catch(()=>{})
        },
        // 添加收藏
       async toggleStatus(item){
         try{
             // item 对象 {id：图片ID,is_collected:图片状态}
        // 发送请求: （告诉后台,你想改的图片状态）
        // put /user/images/图片id  请求体参数 collect 和当前状态取反即可
       const{data:{data}}= await this.$http.put(`/user/images/${item.id}`,{collect:!item.is_collected})
        //操作成功 data.collect 
        this.$message.success(data.collect?'添加收藏成功':'取消收藏成功')
        // 更新当前图片颜色 ----->item.is_collected数据控制----->修改数据的值修改图片颜色
        item.is_collected = data.collect
         }catch(e){
          this.$message.error(item.is_collected?'取消收藏失败':'添加收藏失败')
         }
        },
        // 切换全局与收藏
        changeCollect(){
       //回到第一页,更改筛选条件
        this.reqParams.page = 1
        // 重新执行
        this.getImages()
    },
        // 分页函数
        changePager(newpage){
        this.reqParams.page = newpage
        this.getImages()
        },
        // 获取图片素材
        async getImages(){
            const{
                data:{data}
            }=await this.$http.get('/user/images',{ params: this.reqParams })
            this.images = data.results
            this.total = data.total_count
        }
    },
  }
</script>

<style scoped lang='less'>
  .img-list {
      margin-bottom: 20px;
    .img-item {
      width: 180px;
      height: 180px;
      border: 1px dashed #ddd;
      display:inline-block;
      margin-top: 20px;
      margin-right: 60px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .img-option {
        width: 100%;
        height: 30px;
        background: rgba(0, 0, 0, 0.3);
        line-height: 30px;
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: center;
        span{
            color: #fff;
            margin: 0 30px;
            &.red{
                color: red;
            }
        }
      }

    }
  }
</style>